<template>
	<div class="flex flex-col w-full h-[681px] overflow-y-auto pt-[20px]">
		<base-list-plus
			auto
			class="flex-1"
			:loading="loading"
			:isFinish="isFinish"
			:isEmpty="isEmpty"
			:error="error"
			@load="search"
			@reload="search(true)">
			<SystemItem
				v-for="item in list.map((item) => {
					return {
						...item,
						content: fmtTextWithHtml(item.content)
					}
				})"
				:key="item.id"
				:data="item"
				@delete="handleDelete"
				@detail="handleDetail" />
		</base-list-plus>
	</div>
</template>
<script lang="ts" setup>
import SystemItem from './item/system-item.vue'
import { getMessages } from '@/api/message'
import { BaseListPlus } from '@/components/base'
import { useAppStore } from '@/store'
import { useRequest } from '@/hooks'
import { fmtTextWithHtml } from '@/utils'

const emit = defineEmits(['toDetail'])
const appStore = useAppStore()

const handleDetail = (id: number) => {
	emit('toDetail', id)
}

const { run, loading, error, list, isFinish, isEmpty } = useRequest<any>(getMessages, {
	pageSize: 20,
	onSuccess: () => {}
})

const search = (refresh = false) => {
	run(
		{
			locale: appStore.lang
		},
		{ refresh }
	)
}

const handleDelete = () => {
	console.log('delete')
	search(true)
}

search(true)
</script>
